<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<view class="add-info" v-show="current == 1">
			<view class="add-type">
				<text class="type-title r-flex">选择案件类型:</text>
				<u-row customStyle="flex-wrap: wrap;" gutter="10">
					<u-col span="4" v-for="item in caseTypeList" :key="item.value" @click="selectType(item.value)">
						<view :class="['layout',typeIndex==item.value?'isActive':'']">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="add-type">
				<text class="type-title r-flex">选择案件程序:</text>
				<u-row customStyle="flex-wrap: wrap;" gutter="10">
					<u-col span="4" v-for="item in caseProList" :key="item.value" @click="selectPro(item.value)">
						<view :class="['layout',proIndex==item.value?'isActive':'']">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="add-btn">
				<u-button @click="nextOne()" color="#1C5AD2" shape="circle">下一步</u-button>
			</view>
		</view>
		<view class="add-info" v-show="current == 2">
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">案件名称:</text>
				<u--input placeholder="请输入案件名称" border="bottom" v-model="ruleFormSec.caseName" maxlength="20"
					clearable>
				</u--input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">当事人名称:</text>
				<u--input placeholder="请输入当事人名称" border="bottom" v-model="ruleFormSec.involveName" maxlength="20"
					clearable>
				</u--input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex">选择类型:</text>
				<u-row customStyle="flex-wrap: wrap;" gutter="10">
					<u-col span="4" v-for="item in caseWtList" :key="item.value" @click="selectWt(item.value)">
						<view :class="['layout',wtIndex==item.value?'isActive':'']">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="add-type">
				<text class="type-title r-flex">选择当事人类型:</text>
				<u-row customStyle="flex-wrap: wrap;" gutter="10">
					<u-col span="4" v-for="item in casePartyList" :key="item.value" @click="selectParty(item.value)">
						<view :class="['layout',partyIndex==item.value?'isActive':'']">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="add-type">
				<text class="type-title r-flex">当事人属性:</text>
				<u-row customStyle="flex-wrap: wrap;" gutter="10">
					<u-col span="4" v-for="item in caseAttrList" :key="item.value" @click="selectAttr(item.value)">
						<view :class="['layout',attrIndex==item.value?'isActive':'']">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="add-btn">
				<u-button @click="nextSec()" color="#1C5AD2" shape="circle">下一步</u-button>
			</view>
		</view>
		<view class="add-info" v-show="current == 3">
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">收案时间:</text>
				<u--form labelPosition="left" :model="model">
					<u-form-item borderBottom @click="showAction = true; hideKeyboard()">
						<u-input :customStyle="dateStyle" v-model="model.dateInfo.createDate" disabled
							disabledColor="#ffffff" placeholder="请选择收案时间" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<u-datetime-picker :show="showAction" confirmColor="#1C5AD2" :value="actionVal"
					@close="showAction = false" @cancel="showAction = false" @confirm="confirmAction" mode="date">
				</u-datetime-picker>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">案由:</text>
				<u-input placeholder="请输入案由" border="bottom" v-model="ruleFormSec.actionCause" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">案件标的:</text>
				<u-input placeholder="请输入标的额" border="bottom" v-model="ruleFormSec.matterFee" maxlength="20">
					<template slot="suffix">
						<text>元</text>
					</template>
				</u-input>
			</view>
			<view class="add-btn">
				<u-button @click="nextTir()" color="#1C5AD2" shape="circle">完成</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				isActive: false,
				typeIndex: 0,
				proIndex: 0,
				wtIndex: 0,
				partyIndex: 0,
				attrIndex: 0,
				ruleFormSec: {
					caseName: "",
					involveName: "",
					actionCause: "",
					matterFee: ""
				},
				// 收案时间
				showAction: false,
				model: {
					dateInfo: {
						createDate: ''
					},
				},
				actionVal: Number(new Date()),
				dateStyle: {
					paddingLeft: '9px'
				},
				caseTypeList: [{
					value: "1",
					label: "民事案件"
				}, {
					value: "2",
					label: "冲裁案件"
				}, {
					value: "3",
					label: "刑事案件"
				}, {
					value: "4",
					label: "行政案件"
				}, {
					value: "5",
					label: "商事案件"
				}],
				caseProList: [{
					value: "1",
					label: "调解"
				}, {
					value: "2",
					label: "冲裁"
				}, {
					value: "3",
					label: "一审"
				}, {
					value: "4",
					label: "二审"
				}, {
					value: "5",
					label: "执行异议"
				}, {
					value: "6",
					label: "提审"
				}, {
					value: "7",
					label: "重审一审"
				},{
					value: "8",
					label: "重审二审"
				}, {
					value: "9",
					label: "申请抗诉"
				}],
				caseWtList: [{
					value: "1",
					label: "委托方"
				}, {
					value: "2",
					label: "对方当事人"
				}],
				casePartyList: [{
					value: "1",
					label: "个人"
				}, {
					value: "2",
					label: "单位"
				}],
				caseAttrList: [{
					value: "1",
					label: "原告"
				}, {
					value: "2",
					label: "被告"
				}, {
					value: "3",
					label: "上诉人"
				}, {
					value: "4",
					label: "申请人"
				}]
			}
		},
		onLoad() {},
		onNavigationBarButtonTap() {
			this.nextOne();
			this.nextSec();
		},
		methods: {
			selectType(value) {
				const that = this;
				this.typeIndex = value;
				this.isActive = true;
			},
			selectPro(value) {
				const that = this;
				this.proIndex = value;
				this.isActive = true;
			},
			selectWt(value) {
				const that = this;
				this.wtIndex = value;
				this.isActive = true;
			},
			selectParty(value) {
				const that = this;
				this.partyIndex = value;
				this.isActive = true;
			},
			selectAttr(value) {
				const that = this;
				this.attrIndex = value;
				this.isActive = true;
			},
			nextOne() {
				const that = this;
				uni.setNavigationBarTitle({
					title: "当事人"
				})
				this.current++;
			},
			nextSec() {
				const that = this;
				if (this.ruleFormSec.caseName == '') {
					return this.$refs.uToast.show({
						message: '案件名称为空',
						type: 'default',
					})
				}
				if (this.ruleFormSec.involveName == '') {
					return this.$refs.uToast.show({
						message: '当事人名称为空',
						type: 'default',
					})
				}
				uni.setNavigationBarTitle({
					title: "完善案件"
				})
				this.current++;
			},
			nextTir() {
				const that = this;
				let data = {
					caseType: this.typeIndex > 0 ? this.caseTypeList[this.typeIndex - 1].label : "",
					procedure: this.proIndex > 0 ? this.caseProList[this.proIndex - 1].label : "",
					name: this.ruleFormSec.involveName,
					wtType: this.wtIndex > 0 ? this.caseWtList[this.wtIndex - 1].label : "",
					partyType: this.partyIndex > 0 ? this.casePartyList[this.partyIndex - 1].label : "",
					partyAttr: this.attrIndex > 0 ? this.caseAttrList[this.attrIndex - 1].label : "",
					cause: this.ruleFormSec.actionCause,
					fee: this.ruleFormSec.matterFee,
					lawyerFeeTime: this.model.dateInfo.createDate
				}
				uni.showLoading({
					title: "加载中"
				})
				this.$sendRequest.getCreateCase(data).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.switchTab({
							url: '/pages/caseList/caseList'
						})
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'err',
						})
					}
				}).catch(err => {})
			},
			// 收案时间确认
			confirmAction(e) {
				const that = this;
				that.model.dateInfo.createDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showAction = false;
			},
			// 隐藏软键盘
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-info {
		width: 100%;
		padding: 0 30rpx;
	}

	.layout {
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 10rpx;
		background-color: #f8f8f8;
		text-align: center;
		margin: 12rpx 0;
		color: #7e7e7e;
	}

	.isActive {
		background-color: #E3EAFF;
		color: #1C5AD2;
	}

	.add-btn {
		width: 100%;
		padding: 0 12%;
	}

	.add-btn /deep/ .u-button {
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		margin-top: 60rpx;
	}
</style>